<template>
  <view class="home-page">
    <view class="header">
      <text class="main-title">概率游戏体验中心</text>
      <text class="subtitle">探索概率与决策的奇妙世界</text>
    </view>
    
    <view class="activity-grid">
      <!-- 死亡概率模拟器卡片 -->
      <view class="activity-card" @tap="navigateTo('death')">
        <view class="card-icon">💀</view>
        <text class="card-title">死亡概率模拟器</text>
        <text class="card-description">
          在不同死亡概率下，你能存活多久？体验概率的力量，计算理论收益。
        </text>
        <view class="card-tags">
          <text class="tag">概率模拟</text>
          <text class="tag">期望计算</text>
        </view>
        <view class="enter-btn">进入体验 →</view>
      </view>

      <!-- 风险抉择抽奖卡片 -->
      <view class="activity-card" @tap="navigateTo('lottery')">
        <view class="card-icon">🎰</view>
        <text class="card-title">风险抉择抽奖</text>
        <text class="card-description">
          稳定的200万 vs 99%的2亿，你会如何选择？验证你的决策智慧。
        </text>
        <view class="card-tags">
          <text class="tag">风险决策</text>
          <text class="tag">期望博弈</text>
        </view>
        <view class="enter-btn">进入体验 →</view>
      </view>
    </view>

    <!-- 底部公众号 -->
    <view class="author-footer">
      <text class="official-account-link" @tap="openOfficialAccount">
        关注公众号
      </text>
    </view>
  </view>
</template>

<script setup lang="ts">
const emit = defineEmits(['navigate']);

function navigateTo(page: string) {
  emit('navigate', page);
}

function openOfficialAccount() {
  // 跳转到公众号主页，静默处理错误
  uni.openOfficialAccountProfile({
    username: 'gh_ab75ef78354d',
    success: () => {
      console.log('成功打开公众号主页');
    },
    fail: (err: any) => {
      console.error('打开公众号失败:', err);
      // 不显示任何提示
    }
  });
}
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80rpx 30rpx;
  overflow-x: hidden;
  box-sizing: border-box;
}

.header {
  text-align: center;
  margin-bottom: 100rpx;
  animation: fadeInDown 0.8s ease;
}

.main-title {
  font-size: 60rpx;
  color: white;
  text-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.3);
  margin-bottom: 30rpx;
  font-weight: bold;
  letter-spacing: 4rpx;
  display: block;
}

.subtitle {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1rpx 1rpx 4rpx rgba(0, 0, 0, 0.2);
  font-weight: 300;
  display: block;
}

.activity-grid {
  display: flex;
  flex-direction: column;
  gap: 60rpx;
  max-width: 100%;
  width: 100%;
  margin-bottom: 80rpx;
}

.activity-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 40rpx;
  padding: 50rpx 40rpx;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.8s ease;
  box-sizing: border-box;
}

.activity-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10rpx;
  background: linear-gradient(90deg, #45B05D, #3D9E51);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.activity-card:active::before {
  transform: scaleX(1);
}

.activity-card:active {
  transform: translateY(-20rpx) scale(1.02);
  box-shadow: 0 40rpx 100rpx rgba(69, 176, 93, 0.3);
}

.card-icon {
  font-size: 80rpx;
  margin-bottom: 40rpx;
  display: inline-block;
  animation: bounce 2s infinite;
}

.card-title {
  font-size: 36rpx;
  color: #2c3e50;
  margin-bottom: 30rpx;
  font-weight: 600;
  display: block;
}

.card-description {
  font-size: 26rpx;
  color: #7f8c8d;
  line-height: 1.6;
  margin-bottom: 40rpx;
  min-height: 160rpx;
  display: block;
}

.card-tags {
  display: flex;
  gap: 20rpx;
  margin-bottom: 40rpx;
  flex-wrap: wrap;
}

.tag {
  padding: 12rpx 24rpx;
  background: linear-gradient(135deg, rgba(69, 176, 93, 0.1), rgba(61, 158, 81, 0.1));
  border: 1rpx solid rgba(69, 176, 93, 0.3);
  border-radius: 40rpx;
  font-size: 24rpx;
  color: #45B05D;
  font-weight: 500;
}

.enter-btn {
  width: 100%;
  padding: 30rpx;
  background: linear-gradient(135deg, #45B05D, #3D9E51);
  color: white;
  border-radius: 100rpx;
  font-size: 32rpx;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 8rpx 30rpx rgba(69, 176, 93, 0.3);
}

/* 底部公众号样式 */
.author-footer {
  width: 100%;
  text-align: center;
  padding: 40rpx;
  margin-top: 60rpx;
}

.official-account-link {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  display: inline-block;
}

/* 动画定义 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-60rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(60rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20rpx);
  }
}
</style>

